<template>
  <van-row>
    <van-row>
        <div id="barforbmmcmonitor1" style="width:100%;height:450px;padding 10px 0px"></div>
    </van-row>
    <van-row>
        <table style="table-layout: fixed; border:solid 1px #cdcdcd" border="1" width="100%" cellspacing="0" cellpadding="2">

<tbody>

<tr>

<th v-for="(d, index) in stageColumnTemplate"
    :key="index"
    :index="index"
    style="text-align: left; border:solid 1px #cdcdcd">{{d}}</th>
</tr>
<tr v-for="(dt,index) in tableData" :key="dt.gdwkhbm" :index="index">
    <td style="border:solid 1px #cdcdcd">
 {{dt.gdwkhbm}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.problem_count}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.feedback_approve}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.check_count}}
    </td>
    <td style="border:solid 1px #cdcdcd">
        {{dt.complete_count}}
    </td>
    </tr>
</tbody>
        </table>
    </van-row>
  </van-row>
</template>

<script>
const echarts = require('echarts')

export default {
  name: 'DeptReviewStageMonitor',
  props: ['chartData', 'tableData'],
  data () {
    return {
      echarts: null,
      options: null,
      stageColumnTemplate: ['部门名称', '问题总数', '反馈待终审数', '重新评分数', '完成问题数']
    }
  },
  mounted () {
    this.echarts = echarts.init(document.getElementById('barforbmmcmonitor1'))
    this.options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      yAxis: {
        type: 'category',
        data: ['问题总数', '反馈待终审数', '重新评分数', '完成问题数']
      },
      xAxis: {
        type: 'value'
      },
      series: [{
        label: {
          show: true
        },
        data: [{
          value: 66,
          itemStyle: {
            color: '#a90000'
          }
        }, {
          value: 39,
          itemStyle: {
            color: '#f4e001'
          }
        }, {
          value: 39,
          itemStyle: {
            color: '#2b821d'
          }
        }, {
          value: 39,
          itemStyle: {
            color: '#2b821d'
          }
        }],
        type: 'bar'
      }]
    }

    this.options.series[0].data[0].value = this.chartData.problem_count
    this.options.series[0].data[1].value = this.chartData.feedback_approve
    this.options.series[0].data[2].value = this.chartData.check_count
    this.options.series[0].data[3].value = this.chartData.complete_count

    this.echarts.setOption(this.options)
  }
}
</script>

<style scoped lang="less">

</style>
